<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>名侦探柯南档案馆</title>
    <!--    <script src="../../css/base.css"></script>-->
    <script src="../../resource/vue.js"></script>
    <link rel="stylesheet" href="../../ElementUI/theme-chalk/index.css"/>
    <script src="../../ElementUI/index.js" charset="utf-8"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .logo{
            background-color: #2f3336;
            height: 60px;
        }
        .logo img{
            display: block;
            width: 168px;
        }
        .nav{
            background-color: #2f3336;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            width: 100vw;
            /*background-color: rgba(47, 51, 54, 0.85);*/
            border-bottom: 0!important;
        }
        .el-menu.el-menu--horizontal{
            border-bottom: 0!important;
        }
        .nav .el-menu li{
            background-color: transparent !important;
            border-bottom: none !important;

        }
    </style>
</head>
<body >

<div id="app">
    <el-container style="margin: 0;padding: 0;background-image: url('../../imgs/bg.jpg');">
        <el-header class="nav">
            <div class="logo" style="margin-right: 40px;opacity: 0.85">
                <img src="../../imgs/logo.png" style="opacity: 0.85">
            </div>
            <!--                导航栏-->
            <el-menu style="flex: 1"
                     class="el-menu-demo"
                     default-active="2"
                     background-color="#2f3336"
                     text-color="#fff"
                     mode="horizontal"
                     active-text-color="#ffd04b"
            >

                <el-menu-item index="1" @click="index()">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-menu-item index="2" @click="animeCharacters()">
                    <i class="el-icon-s-platform"></i>
                    <span slot="title">动漫</span>
                </el-menu-item>

            </el-menu>
            <div class="welcome" style="color: #eee;margin-right: 40px">
                欢迎{{userName}}登录
            </div>
            <div @click="gotoadmin" v-show="role == 1" style="cursor: pointer;color: #eee;margin-right: 20px">
                进入后台
                <i class="el-icon-s-unfold" style="font-size: 30px;cursor: pointer"></i>
            </div>
        </el-header>
        <el-main style="margin-top: 60px;height: 168vh;">
            <el-card style="width: 1400px;height: 130vh;margin: 0 auto; background-color:#242729;
                        border: #242729;color:  #eee">
                动漫人物介绍
            </el-card>

        </el-main>
    </el-container>




</div>

<script>
    var vue = new Vue({
        el: '#app',
        data() {
            return{
                userName: "",
                role:'',
            }
        },
        methods: {
            gotoadmin(){
                window.location.href = "/html/admin/admin.html";
            },
            index(){
                window.location.href = "/html/receptiondesk/index.html";
            },
            animeCharacters(){
                window.location.href = "/html/receptiondesk/animeCharacters.html";
            }
        },
        mounted() {
            if (localStorage.getItem('showLoginSuccess') === 'true'){
                this.$message.success('登录成功！');
                localStorage.removeItem('showLoginSuccess');
            }
            this.userName = localStorage.getItem("user");
            this.role = localStorage.getItem("role");
        },

    })

</script>
</body>
</html>